<@override name="head"> 
<#include "/inc/include-easyUI-css.html">
<!-- Core CSS file -->
<link rel="stylesheet" href="${basePath}/static/plugins/photoswipe/dist/photoswipe.css"> 
<link rel="stylesheet" href="${basePath}/static/plugins/photoswipe/dist/default-skin/default-skin.css"> 
<style type="text/css">
.btn {
	height: inherit;
	border: 0;
}
.sa-button-container .btn{
 	margin: auto 15px; 
}
</style>
</@override> 
<@override name="layout_main_content">
<div class="main-content">
	<div class="main-content-inner">
		<div class="breadcrumbs ace-save-state" id="breadcrumbs">
			<ul class="breadcrumb">
				<li><i class="ace-icon fa fa-home home-icon"></i> <a href="javascript:void(0)">首页</a>
				</li>
				<li class="active">日常消费管理</li>
			</ul>
			<!-- /.breadcrumb -->

			<!-- <div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon"> <input type="text"
						placeholder="Search ..." class="nav-search-input"
						id="nav-search-input" autocomplete="off" /> <i
						class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div> -->
			<!-- /.nav-search -->
		</div>

		<div class="page-content">

			<div class="page-header">
				<h1>
					日常消费管理
					<small> 
						<i class="ace-icon fa fa-angle-double-right"></i> 
					</small>
				</h1>
			</div>
			<!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<!-- 搜索form -->
					<form id="searchUserForm" action="" class="form-horizontal" role="form" >
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label no-padding-right" for="search-countDatetime"> 时间 </label>
							<div class="col-sm-9">
								<input type="text" id="search-countDatetime" name="countDatetime" 
									placeholder="时间" class="col-xs-10 col-sm-5" readonly="true"/>
								<div id="getBeginTime"></div>
								
								<div>
			                        <button type="button" id="btn-search" class="btn btn-primary start" style="margin-left: 100px;">
					                    <i></i>
					                    <span>搜索</span>
					                </button>
					                <button type="reset" class="btn btn-warning cancel" style="margin-left: 20px;">
					                    <i></i>
					                    <span>取消</span>
					                </button>
	                           </div>
							</div>
							
						</div>
						<div class="space-4"></div>
					</form>
					<table id="userList" border="false" width="100%" height="450px"></table>
					
					<!-- begin 展现图片 -->
					<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
						<div class="pswp__bg"></div>
						<div class="pswp__scroll-wrap">
							<div class="pswp__container">
								<div class="pswp__item"></div>
								<div class="pswp__item"></div>
								<div class="pswp__item"></div>
							</div>
							<div class="pswp__ui pswp__ui--hidden">
								<div class="pswp__top-bar">
									<div class="pswp__counter"></div>
									<button class="pswp__button pswp__button--close"
										title="Close (Esc)"></button>
									<button class="pswp__button pswp__button--fs"
										title="Toggle fullscreen"></button>
									<button class="pswp__button pswp__button--zoom"
										title="Zoom in/out"></button>
									<div class="pswp__preloader">
										<div class="pswp__preloader__icn">
											<div class="pswp__preloader__cut">
												<div class="pswp__preloader__donut"></div>
											</div>
										</div>
									</div>
								</div>
								<div
									class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
									<div class="pswp__share-tooltip"></div>
								</div>
								<button class="pswp__button pswp__button--arrow--left"
									title="Previous (arrow left)"></button>
								<button class="pswp__button pswp__button--arrow--right"
									title="Next (arrow right)"></button>
								<div class="pswp__caption">
									<div class="pswp__caption__center"></div>
								</div>
							</div>
						</div>
					</div>
					<!-- end 展现图片 -->
					
					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content -->
	</div>
</div>
<!-- /.main-content -->
</@override> 
<@override name="footer"> 
<#include "/inc/include-easyUI-js.html">
<!-- Core CSS file -->
<script src="${basePath}/static/plugins/photoswipe/dist/photoswipe.min.js"></script> 
<script src="${basePath}/static/plugins/photoswipe/dist/photoswipe-ui-default.min.js"></script> 
<script type="text/javascript">
jeDate({
	dateCell:"#search-countDatetime",//直接显示日期层的容器，可以是ID  CLASS
	format:"YYYY-MM",//日期格式
	isinitVal:false, //是否初始化时间
	festival:false, //是否显示节日
	isTime:true, //是否开启时间选择
	minDate:"2017-06-01 00:00:00",//最小日期
	maxDate:jeDate.now(0), //设定最大日期为当前日期
});
	var consumeDataGrid;
     $(function () {
         consumeDataGrid = $("#userList").datagrid({
             url: '${basePath}/admin/consumeRecord/getList',
             rownumbers: true,
             fitColumns:true,
             idField: 'id',
             pageSize: 10,
             pagination: true,
             pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
             onLoadError:function(data){
             	$.messager.alert("消费信息", "暂无消费数据信息", "error");
             
             },
             frozenColumns: [[{
                 title: 'id',
                 field: 'id',
                 width: 50,
                 checkbox: true
             }]],
             columns: [[ {
                 field: 'consumeItemName',
                 title: '消费项目',
                 align:'center',
                 width: 80,
             }, {
                 field: 'consumeMoney',
                 title: '消费金额',
                 align:'center',
                 width: 50,
             }, {
                 field: 'payerUserName',
                 title: '付款人',
                 align:'center',
                 width: 50
             }, {
                 field: 'consumeUserNames',
                 title: '消费人',
                 align:'center',
                 width: 150
             }, {
                 field: 'description',
                 title: '描述',
                 align:'center',
                 width: 120
             }, {
                 field: 'createDate',
                 title: '创建时间',
                 align:'center',
                 width: 80
             }, {
	    field: "toImages",
	    title: "账单图片",
	    align:'center',
	    width: 50,
	    formatter: function (value, row, index) {
			return "<a style='color:#0909df' href=\"javascript:toImages("+index+");\" title='打开图片'>打开图片</a>";
		}
	},
        ]],
        toolbar: [
        {
            text: '创建',
            iconCls: 'icon-add',
            handler: function () {
            	createConsume();
            }
        }, '-', {
            text: '删除',
            iconCls: 'icon-remove',
            handler: function () {
                deleteConsume();
            }
        }, '-', {
            text: '编辑',
            iconCls: 'icon-edit',
            handler: function () {
                editConsume();
            }
        }, '-', {
            text: '取消选中',
            iconCls: 'icon-undo',
            handler: function () {
                consumeDataGrid.datagrid('unselectAll');
            }
        }]
    });
     });
     function toImages(index){
     	consumeDataGrid.datagrid('clearChecked');
     	consumeDataGrid.datagrid('selectRow',index);
     	var row = consumeDataGrid.datagrid('getSelected');
     	console.log(row);
     	var images = row.images;
		if(images){
			var pswpElement = document.querySelectorAll('.pswp')[0];
		    // build items array
		    var items = [
		        {
		            src: images[0].relativePath,
		            w: 964,
		            h: 1024
		        }
		    ];
		    
		    // define options (if needed)
		    var options = {
		             // history & focus options are disabled on CodePen        
		        history: false,
		        focus: false,
		
		        showAnimationDuration: 0,
		        hideAnimationDuration: 0
		        
		    };
		    
		    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
		    	gallery.init();
		}
     }
     
     function reloadDataGrid() {
         consumeDataGrid.datagrid('clearChecked');
         consumeDataGrid.datagrid('reload');
     }
        
    //快速搜索按钮
	$('#btn-search').click(function(){
		consumeDataGrid.datagrid('unselectAll');
          	var countDatetime = $('#search-countDatetime').val();
          	consumeDataGrid.datagrid('load', {
			countDatetime : countDatetime,
		});
	});
     
	//删除消费
	function deleteConsume() {
		var ids = [];
		var rows = consumeDataGrid.datagrid('getSelections');
		if (rows.length > 0) {
			swal({
				title : "你是否确定删除？",
				text : '',
				type : "warning",
				showCancelButton : true,
				confirmButtonColor : "#DD6B55",
				confirmButtonText : "删除",
				cancelButtonText : "取消",
				closeOnConfirm : false,
				//closeOnCancel : false
			},
			function(isConfirm) {
				if (isConfirm) {
					var authFlag = true;
					var userName = '${activeUser.userName}';
					for ( var i = 0; i < rows.length; i++) {
						ids.push(rows[i].id);
						if(rows[i].pagerUserName != userName){
							authFlag = false;
							break;
						}
					}
					if(authFlag){
						$.ajax({
							method : 'post',
							url : '${basePath}/admin/consumeRecord/delete',
							data : {
								ids : ids.join(',')
							},
							cache : false,
							dataType : "json",
							success : function(data) {
								if (data.success) {
									swal("删除成功","","success");
									reloadDataGrid();
								} else {
									swal("删除失败", data.obj,"error");
								}
							}
						});
					}else{
						swal("删除失败", '无权限删除别人的',"error");
					}
				} 
			});
		} else {
			top.showMsg("提示", "请选择要删除的消费！");
		}
	}
	
	function createConsume(){
       	window.location.href='${basePath}/admin/consumeRecord/toCreateEveryConsume/index';
	}

	function editConsume() {
		var rows = consumeDataGrid.datagrid('getSelections');
		if (rows.length > 0) {
			if (rows.length == 1) {
				var userName = '${activeUser.userName}';
				if(rows[0].pagerUserName == userName){
					window.location.href='${basePath}/admin/consumeRecord/toEditEveryConsume/index?id='+rows[0].id;						
				}else{
					swal("编辑失败", '无权限编辑别人的',"error");
				}
			} else {
				top.showMsg("提示", '只能选择一个消费进行编辑！');
			}
		} else {
			top.showMsg("提示", "请选择要编辑的消费！");
		}
	}
	
</script>	
</@override> 
<@extends name="/layouts/admin-home.html"/>
